// pages/record/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 收入支出按钮数据
    costType: [{
        name: "支出",
        type: "pay",
        isAct: true //是否为激活状态
      },
      {
        name: "收入",
        type: "income",
        isAct: false // 是否是激活状态
      }
    ],
    // 支出收入图标
    costIcon: {
      // 支出图标
      pay: [],
      // 收入图标
      income: []
    },
    // 当前激活的图标数据
    actIcon: {
      type: "",
      index: "",
      id: ""
    },
    // 金额，日期，备注
    info: {
      money: "",
      date: "",
      comment: ""
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 调用函数忙活去当天日期
    this.getToday();

    // 调用函数获取图标数据
    this.getIconData();
  },

  // 收入支出点击切换事件
  costTap(e) {
    // e: 事件对象
    // console.log(e)
    // console.log(this.data.costType)

    // 获取当前点击的数据对应的下标
    var i = e.currentTarget.dataset.index;
    // console.log(i)

    // 判断当前点击的数据是否是激活状态，如果是则不执行以下所有操作
    if (this.data.costType[i].isAct) {
      // console.log("已经激活了")
      return; // 终止执行以下代码
    }

    // 取消上一个的激活数据
    for (var k = 0; k < this.data.costType.length; k++) {
      if (this.data.costType[k].isAct) {
        // 条件成立则说明该数据为激活状态，则要取消激活
        this.data.costType[k].isAct = false;
        break; // 终止循环
      }
    }


    // 设置当前点击的数据为激活状态
    this.data.costType[i].isAct = true;

    // console.log(this.data.costType)

    // 数据响应，修改视图层的数据，页面才发生改变
    this.setData({
      costType: this.data.costType
    })
  },
  // 获取图标数据
  getIconData() {

    // 调用云函数get_icon_data
    wx.cloud.callFunction({
      name: "get_icon_data",
      success: res => {
        // console.log("获取图标数据成功==》", res)

        // 获取返回的数据
        var data = res.result.data;
        // console.log(data)

        // 根据数据类型，对图标数据进行分类
        var banner = {
          pay: [], // 支出图标
          income: [] // 收入图标
        }

        // forEach() 遍历函数
        data.forEach(v => {

          // 给每项数据添加一个激活字段, 默认都是未激活
          v.isAct = false;

          // v: 当前项
          // if(v.type == 'pay'){
          //   banner.pay.push(v)
          // }else{
          //   banner.income.push(v)
          // }
          // 简写
          banner[v.type].push(v);
        })

        


        // 分类完成，处理数据结构
        for (var k in banner) {

          // 开始截取下标
          var beginIndex = 0;
          // slice(开始截取元素下标，结束截取元素下标)：数组截取元素的api， 截取的内容会以一个新数组返回, 截取的内容不包括结束截取下标对应元素

          // 条件循环语句 while(条件){条件成立执行的代码}  先判断条件是否成立，如果是则执行代码，代码执行完毕，则再次判断条件，条件如果再次成立则再次执行代码，以此类推直到条件不再成立
          while (beginIndex < banner[k].length) {

            var newArr = banner[k].slice(beginIndex, beginIndex + 8);
            // console.log("newArr==>", newArr)

            // 将新数组添加到图标数据上
            this.data.costIcon[k].push(newArr)

            // 更新开始截取下标
            beginIndex += 8;

          }
        }

        //console.log(this.data.costIcon)
        // 数据响应
        this.setData({
          costIcon: this.data.costIcon
        })
      },
      fail: err => {
        console.log("获取图标数据失败==>", err)
      }
    })

  },
  // 图标点击选择事件
  costIconTap(e) {
    // console.log("e==>", e)

    // 获取当前点击的图标类型
    var t = e.currentTarget.dataset.type;

    // 获取当前点击的图标所在的滑块下标
    var i = e.currentTarget.dataset.index;

    // 获取当前点击的图标对应下标
    var d = e.currentTarget.dataset.id;

    // console.log(t, i, d)

    // 判断当前点击的图标是否已经激活，如果是已经激活状态，则取消，如果不是则设置激活
    if (this.data.costIcon[t][i][d].isAct) {
      // 条件成立说明当前点击的图标已经激活，则要取消激活
      this.data.costIcon[t][i][d].isAct = false;

      // 当前页面没有激活图标了，则该数据要清空值
      this.data.actIcon.type = "";
      this.data.actIcon.index = "";
      this.data.actIcon.id = "";

    } else {

      // 如果有已经存在激活的图标，则取消它的激活状态
      if (this.data.actIcon.type != "") {
        // 条件成立则说明有激活的图标

        var actT = this.data.actIcon.type;
        var actI = this.data.actIcon.index;
        var actD = this.data.actIcon.id;

        this.data.costIcon[actT][actI][actD].isAct = false; // 取消激活
      }



      // 设置当前点击的图标为激活状态
      this.data.costIcon[t][i][d].isAct = true;

      // 记录当前激活的图标数据
      this.data.actIcon.type = t;
      this.data.actIcon.index = i;
      this.data.actIcon.id = d;
    }
    // console.log("this.data.actIcon==>", this.data.actIcon)
    // 数据响应
    this.setData({
      costIcon: this.data.costIcon
    })

  },
  // 获取当天日期
  getToday() {

    // 获取时间对象
    var time = new Date();


    // 获取年份
    var y = time.getFullYear();

    // 获取月份 计算机的月份是从0开始，所以真实月份需加1
    var m = time.getMonth() + 1;

    // 获取日
    var d = time.getDate();

    // console.log(y, m, d)

    // 数据响应
    this.setData({
      "info.date": y + "-" + this.addZero(m) + "-" + this.addZero(d)
    })

  },
  // 补零函数
  addZero(num) {
    return num < 10 ? "0" + num : num;
  },
  // 获取用户选择的日期，金额，备注事件
  getInfo(e) {

    // console.log(e)

    // 获取修改数据的类型
    var type = e.currentTarget.dataset.type;
    // console.log(type)

    // 处理金额的格式
    if (type == "money" && e.detail.value != "") {
      // toFixed() 保留小数位的方法, 调用者一定数值类型, 会导致数值四舍五入
      // slice(开始截取下标，结束截取下标) 字符串截取api， 负数指的是从右到左开始的元素下标，截取的内容是不包括结束截取下标对应的元素的
      e.detail.value = Number(e.detail.value).toFixed(3).slice(0, -1);
    }


    // 修改数据
    this.data.info[type] = e.detail.value;

    // 数据响应
    this.setData({
      info: this.data.info
    })


  },
  // 点击保存添加一条记账记录
  addMsgData() {

    // 存放要添加的数据
    var msgData = {};

    // 获取用户选择的收入支出标题数据
    for (var i = 0; i < this.data.costType.length; i++) {
      if (this.data.costType[i].isAct) {
        msgData.costType = this.data.costType[i].type;
        msgData.costName = this.data.costType[i].name;
      }
    }


    // 获取用户选择的图标数据

    if (this.data.actIcon.type == "") {
      // 条件成立则说明用户没有选择图标，则不能执行保存数据操作

      // 显示提示框告知用户请选择图标
      wx.showToast({
        title: "请选择图标！！！",
        icon: "none",
        mask: true
      })

      return; // 终止以下代码
    } else {
      // 说明用户有选择图标， 则可以保存数据
      var t = this.data.actIcon.type;
      var i = this.data.actIcon.index;
      var d = this.data.actIcon.id;

      msgData.imgUrl = this.data.costIcon[t][i][d].imgUrl;
      msgData.imgTitle = this.data.costIcon[t][i][d].title;
    }


    // 获取用户的金额 日期 备注数据
    for (var k in this.data.info) {
      msgData[k] = this.data.info[k]
    }

    // 如果金额为空的情况下，固定金额为0.00
    if (msgData.money == "") {
      msgData.money = "0.00"
    }


    // console.log("msgData==>", msgData)

    // 显示加载框
    wx.showLoading({
      title: "正在保存！",
      mask: true
    })
    console.log("msgData",msgData);
    // 调用云函数
    wx.cloud.callFunction({
      name: "add_msg_data",
      data: {
        msg: msgData
      },
      success: res => {
        console.log("添加数据成功==》", res)

        // 数据保存成功， 关闭加载框
        wx.hideLoading();

        // 数据保存成功，返回首页
        wx.navigateBack();
      },
      fail: err => {
        console.log("添加数据失败==》", err)
      }

    })
  }
})